<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>home</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- Vue库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- Import jQuery -->
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" href="../icons/element-icons.woff">
  <link rel="stylesheet" href="../css/home.css">
  <link rel="stylesheet" href="../css/sidebar.css">
  <link rel="stylesheet" href="../css/navbar.css">
  <link rel="stylesheet" href="../css/normal.css">
</head>

<body>
  <div id="app">
    <div class="app-wrapper" :class="{'sidebar-hide':isActive}">
      <div class="sidebar-container" :span="4">
        <el-scrollbar max-height="1080px">
          <el-menu mode="vertical" :show-timeout="100" class="el-menu-vertical-demo" @open="handleOpen"
            @close="handleClose" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9"
            active-text-color="#409EFF">
            <el-menu-item index="0">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>商品</span>
              </template>
              <el-menu-item index="1-1">商品列表</el-menu-item>
              <el-menu-item index="1-2">添加商品</el-menu-item>
              <el-submenu index="1-3"><span slot="title">商品分类</span>
                <a href="viewProductAttr?categoryId=CATS"> <el-menu-item index="1-3-1">猫</el-menu-item></a>
                <a href="viewProductAttr?categoryId=DOGS"><el-menu-item index="1-3-2">狗</el-menu-item></a>
                <a href="viewProductAttr?categoryId=FISH"><el-menu-item index="1-3-3">鱼</el-menu-item></a>
                <a href="viewProductAttr?categoryId=BIRDS"><el-menu-item index="1-3-4">鸟</el-menu-item></a>
                <a href="viewProductAttr?categoryId=REPTILES"><el-menu-item index="1-3-5">爬行类</el-menu-item></a>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-s-order"></i>
              <span slot="title">订单</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">待开发</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">管理</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="main-container" :span="20">
        <el-menu class="navbar" mode="horizontal">
          <div class="hamburger-container" :toggleClick="toggleSideBar" :isActive="opened">
            <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style=""
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691"
              xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
              <path
                d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
                p-id="1692"></path>
              <path
                d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
                p-id="1693"></path>
              <path
                d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
                p-id="1694"></path>
            </svg>
          </div>
          <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
            <div class="avatar-wrapper">
              <img class="user-avatar">
              <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu class="user-dropdown" slot="dropdown">
              <a class="inlineBlock" to="/">
                <el-dropdown-item command="home">
                  首页
                </el-dropdown-item>
              </a>
              <el-dropdown-item divided>
                <span @click="logout" style="display:block;">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu>
        <el-card class="operate-container" shadow="never">
          <i class="el-icon-tickets" style="margin-top: 5px"></i>
          <span style="margin-top: 5px">数据列表</span>
          <el-button class="btn-add" @click="addProductAttrCate()" size="mini">
            添加
          </el-button>
        </el-card>
        <div class="table-container">
          <el-table ref="productAttrCateTable" style="width: 100%" :data="list" v-loading="listLoading" border>
            <el-table-column label="编号" width="100" align="center">
              <template slot-scope="scope">{{scope.row.id}}</template>
            </el-table-column>
            <el-table-column label="图片" align="center">
              <template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
            </el-table-column>
            <el-table-column label="类型名称" width="200" align="center">
              <template slot-scope="scope">{{scope.row.name}}</template>
            </el-table-column>
            <el-table-column label="简介" width="400" align="center">
              <template slot-scope="scope">{{scope.row.descn}}</template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize" :page-sizes="[5,10,15]"
            :current-page.sync="listQuery.pageNum" :total="total">
          </el-pagination>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :before-close="handleClose()" width="30%">
          <el-form ref="productAttrCatForm" :model="productAttrCate" :rules="rules" label-width="120px" id="productAttrCateForm" action="/addProductAttr" method="post">
            <el-form-item label="编号" prop="id">
              <el-input v-model="productAttrCate.id" auto-complete="off" id="id" name="id"></el-input>
            </el-form-item>
            <el-form-item label="类型名称" prop="name">
              <el-input v-model="productAttrCate.name" auto-complete="off" name="name" id="name"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="pic">
              <el-upload class="avatar-uploader" action="/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="productAttrCate.pic" :src="productAttrCate.pic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="简介" prop="descn">
              <el-input v-model="productAttrCate.descn" auto-complete="off" name="descn" id="descn"></el-input>
            </el-form-item>
            <el-form-item  class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="handleConfirm()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</body>
<script src="../js/productAttr.js"></script>
<script th:inline="javascript">
  let courseAvgs = [[${ products }]]
  setList(courseAvgs);
  console.log(courseAvgs);
</script>

</html>